<template>
  <span>
    <a-button
      v-if="showButton"
      :type="type || 'default'"
      :class="className"
      :size="size"
      @click="openLogModal"
    >
      <slot>Log</slot>
    </a-button>
    <a-modal
      maskClosable
      v-bind="$props"
      v-model="visible"
      width="80%"
      class="dailyRecord"
      :z-index="9999"
      @cancel="cancel"
    >
      <template #title>
        <div class="d-flex-modal-title">
          <div>
            {{ $t('plm_ope_log') }}
            <div
              v-if="recordType === 2"
              style="font-size: 12px; color: rgba(0, 0, 0, 0.55)"
            >
              (历史日志为6个月前大数据中心归档日志，获取会相对慢一些，请耐心等待。)
            </div>
          </div>
          <div>
            <a-button
              v-if="recordType === 1"
              type="link"
              @click="handleHistory"
            >
              历史日志
            </a-button>
            <a-button v-else type="link" @click="open">
              <a-icon type="rollback" /> 当前日志
            </a-button>
          </div>
        </div>
      </template>
      <a-table
        bordered
        row-key="id"
        :pagination="false"
        :scroll="{ x: '100%', y: 400 }"
        size="small"
        :data-source="data"
        :loading="isspinning"
        :columns="columns"
        @change="changePage"
      >
        <div slot="name" slot-scope="text, record">
          <div v-if="record.ossUrl">
            <a-button @click.prevent="downLoad(record.ossUrl)">
              <a-icon type="download" />
              点击下载变更excel
            </a-button>
          </div>
          <ul v-else class="text-left list-style-none">
            <li
              v-for="(item, index) in (text || '').split('\n')"
              :key="index + '-' + item.id"
              :index="index + 1"
              class="text-left"
              :style="{ paddingLeft: indents(item) + 'em' }"
              style="margin-bottom: 3px"
            >
              <span v-if="item">
                <span v-if="!text.includes('\t')"> {{ index + 1 }}. </span
                >{{ item }}</span
              >
            </li>
          </ul>
        </div>
      </a-table>
      <footer slot="footer" class="text-right">
        <a-button @click="cancel"> 关闭 </a-button>
      </footer>
    </a-modal>
  </span>
</template>
<script>
import { nextTick } from 'vue'
export default {
  name: 'DailyRecord',
  props: {
    className: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    showButton: {
      type: Boolean,
      default: false
    },
    value: { type: Boolean, default: false },
    params: {
      type: Object,
      default: () => {
        return {}
      }
    },
    size: {
      type: String,
      default: 'small'
    }
  },
  data() {
    return {
      isspinning: false,
      visible: false,
      recordType: 1,
      pagination: {
        total: 122,
        current: 1,
        pageSize: 20,
        showTotal: (total, range) => `共${total}条日志`
      },
      data: [],
      columns: [
        {
          align: 'center',
          title: '变更内容',
          dataIndex: 'updateDetail',
          key: 'updateDetail',
          scopedSlots: { customRender: 'name' }
        },
        {
          align: 'center',
          title: '部门',
          width: '160px',
          dataIndex: 'department',
          key: 'department'
        },
        {
          align: 'center',
          title: this.$t('plm_excutor'),
          width: '70px',
          dataIndex: 'operUserName',
          key: 'operUserName'
        },
        {
          align: 'center',
          title: '更新时间',
          width: '210px',
          dataIndex: 'gmtCreate',
          key: 'gmtCreate'
        }
        //
      ]
    }
  },
  computed: {
    indents() {
      return text => {
        const val = text.match(/\t/g)
        return val ? text.match(/\t/g).length : 0
      }
    }
  },
  watch: {
    value(val) {
      this.visible = val
      // if (this.visible) {
      //   this.open()
      // }
    },
    visible(val) {
      if (val) {
        this.$nextTick(() => this.open())
        // this.open()
      }
    }
  },
  // mounted () {
  //   this.open()
  // },
  methods: {
    openLogModal() {
      this.visible = true
    },
    async handleHistory() {
      this.isspinning = true
      this.recordType = 2
      this.$api.plan
        .fetchList('/bizLog/get-history-biz-logs', this.params)
        .then(res => {
          this.isspinning = false
          this.data = res || []
        })
    },
    changePage(page, pageSize) {
      this.pagination.current = page.current
    },
    open() {
      if (this.params.bizId) {
        this.isspinning = true
        this.recordType = 1
        this.$api.plan
          .fetchList('/bizLog/get-biz-logs', this.params)
          .then(res => {
            this.isspinning = false
            this.data = res
          })
      }
    },
    downLoad(url) {
      this.$downloadExcel(url)
      this.$message.success('下载成功!')
    },
    cancel(val) {
      this.visible = false
      this.$emit('input', false)
    }
  }
}
</script>
<style scoped>
.text-inner::before {
  content: attr(index);
}
.d-flex-modal-title {
  display: flex;
  width: calc(100% - 30px);
  justify-content: space-between;
}
</style>

<style>
.dailyRecord .ant-modal-content button {
  pointer-events: unset;
}
</style>
